/*
	
	COLOR PALETTE
	---------------------------
	
    Default font-size for HTML :    16px
    Placeholder Text Color     :    #E6E6E8
	Primary Background Color   :    transparent
	Highlight Color            :    #EC5E79, #E8588C
	Primary Text Color         :    #212121, #474747
	Subordinate Text Color     :    #AEAEAE
	Dividing Line Color        :    #F4F4F4
	


	TABLE OF CONTENTS
	---------------------------
	
	1. Basic
	    1.1. Reset Stylesheets


	2. Helper Classes
	3. Typography
	4. Spacing
	5. Basic Layout Styles
		5.1. Bootstrap 3.x
        5.2. Material Container
		5.3. Main Wrapper
		5.4. Seamless Grid

	6. Navigation Area	
	7. Header Area
    8. Brand	
	9. Footer
	10. Social Buttons
	    10.1. Social Background
		10.2. Social General
		
	11. Back to Top
	12. Loader
	13. Overlay
	14. Pagination
	15. Filterable Navigation  
	16. Sidebar
	    16.1. Basic
		16.2. Calendar Widget
		16.3. Post List
		16.4. Post List with Featured Image
		16.5. Link List


	17. Search 
		17.1. Search of Widget
		
	18. Tags 
	19. Entry  
	    19.1. Spacing
		19.2. Text
		19.3. Content
		19.4. Meta
		
	20. Comments
	21. 3rd Party Plugins
    22. Video


	
*/

$basic-font-size       : 16px;
$font-stack            : 'Helvetica Neue', Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB', Arial, sans-serif;
$font-mobile-stack     : "lucida grande", tahoma, verdana, arial, sans-serif;
$placeholder-text-color: #E6E6E8;
$highlight-color1      : #EC5E79;
$highlight-color2      : #E8588C;
$primary-text-color1   : #212121;
$primary-text-color2   : #474747;
$sub-text-color        : #AEAEAE;
$dividing-line-color   : #F4F4F4;
$primary-bg-color      : transparent;


@mixin transition-cubic-bezier() {
	/* @include transition-cubic-bezier(); */
	  transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

@mixin transition-default() {
	/* @include transition-default(); */
	transition: all 0.3s ease;
}


@mixin transition-none() {
	/* @include transition-none(); */
	transition: none; 
}


@mixin bg-gradient() {
	/* @include bg-gradient(); */
	background: $highlight-color1;
	background: linear-gradient(to right, $highlight-color1 0%,$highlight-color2 100%);
}


@mixin icontxt-gradient() {
	/* @include icontxt-gradient(); */
	/* The font is the default color when the browser is IE */
	background: linear-gradient(to right, $highlight-color1 0%,$highlight-color2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}

@mixin outer-shadow() {
	/* @include outer-shadow(); */
	box-shadow: 0 4px  4px  rgba(0, 0, 0, .05),
               0 1px  6px  rgba(0, 0, 0, .05),
               0 8px  8px  rgba(0, 0, 0, .05), 
               0 16px 16px rgba(0, 0, 0, .05), 
               8px 32px 32px rgba(0, 0, 0, .02), 
               8px 64px 64px rgba(0, 0, 0, .02);
	
}


/* Ripple Effect */
@mixin anime-ripple() {
	/* @include ianime-ripple(); */
	animation: ripple 0.6s linear infinite;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
    }
}

